<template>
  <div class="app-container">
    <div class="search-container">
      <el-form style="width: 100%;" ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row :gutter="40">
          <el-col :span="8" :xs="24">
            <el-form-item prop="orderId" label="订单编号" style="display: flex;">
              <el-input v-model="queryParams.orderId" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item prop="goodsName" label="商品名称">
              <el-input v-model="queryParams.goodsName" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item prop="logisticsNo" label="物流单号">
              <el-input v-model="queryParams.logisticsNo" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="订单状态" prop="orderStatus" style="display: flex;">
              <el-select v-model="queryParams.orderStatus" placeholder="全部" style="width: 100%;" clearable>
                <el-option label="正常" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item prop="payWay" label="支付方式">
              <el-select v-model="queryParams.payWay" placeholder="全部" style="width: 100%;" clearable>
                <el-option label="微信支付" :value="1" />
                <el-option label="支付宝支付" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item prop="createDate" label="下单日期" style="display: flex;">
              <el-date-picker :editable="false" v-model="queryParams.createDate" type="date" style="width: 100%;"
                placeholder="下单日期" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item prop="deliveryType" label="配送方式">
              <el-select v-model="queryParams.deliveryType" placeholder="全部" style="width: 100%;" clearable>
                <el-option label="快递配送" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="display: flex; justify-content: center">
            <el-form-item>
              <div style="width: 100%; display: flex; justify-content: center;">
                <el-button type="primary" @click="handleQuery">
                  <i-ep-search />
                  搜索
                </el-button>
                <el-button @click="handleResetQuery">
                  <i-ep-refresh />
                  重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="toolsBox">
        <div class="total">共{{ total }}条</div>
        <div class="tLine"></div>
        <div class="toolBtn">批量备注</div>
        <div class="toolBtn">打单发货</div>
        <div class="toolBtn">批量取消</div>
      </div>
      <el-table v-loading="loading" :data="pageData" ref="table" empty-text="暂无数据" class="orderData" :header-cell-style="{
        backgroundColor: '#f2f4f9',
        fontSize: '14px',
        color: '#333',
      }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品信息" min-width="250">
          <template #default="scope">
            <div class="goodBox">
              <div class="tab" v-for="(item, i) in scope.row.orderGoodsList" :key="i">
                <img class="img" src="@/assets/images/tx.png" alt="" />
                <el-tooltip placement="top" :show-after="300">
                  <template #content>
                    <div>
                      <span>商品名称：</span>
                      <span>
                        {{
                          item.spuName
                        }}
                      </span>
                    </div>
                    <div>
                      <span>规格名称：</span>
                      <span>{{ item.specName }}</span>
                    </div>
                    <div>
                      <span>支付价格：</span>
                      <span>¥{{ item.goodsAmount / 100 }}</span>
                    </div>
                    <div>
                      <span>购买数量：</span>
                      <span>{{ item.goodsCount }}</span>
                    </div>
                  </template>
                  <span class="line2 w-250">
                    {{ item.spuName }}
                  </span>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column sortable label="下单时间" prop="createTime" width="180" />

        <el-table-column label="订单编号" min-width="180">
          <template #default="scope">
            <div>
              {{ scope.row.orderId }}
              <svg-icon icon-class="copy" style="cursor: pointer" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实付款" prop="module" width="100" align="center">
          <template #default="scope">
            <div style="display: flex; justify-content: center">
              <div class="payment">
                <div class="awy">微信支付</div>
                <div class="price">￥{{ scope.row.totalAmount / 100 }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户信息" min-width="240" align="center">
          <template #default="scope">
            <div class="box">
              <div class="userInfo">
                <div class="lt">
                  <img src="@/assets/images/tx.png" alt="" class="avatar mr-2" />
                  <div class="count">
                    <div class="tpp">鸽**紫</div>
                    <div class="btt">185****8523</div>
                  </div>
                </div>
                <div class="rt">
                  <el-icon color="#6C6C6C" size="15">
                    <component is="Hide" />
                  </el-icon>
                </div>
              </div>
              <div class="userAddress">
                江西省赣州市章贡区沙河镇知荣路**************
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发货方式" width="120" align="center">
          <template #default="scope">
            <div style="font-size: 14px; font-weight: 500; color: #333">
              快递配送
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" prop="region" width="120" align="center">
          <div class="state">
            <div class="cir mr-1"></div>
            已发货
          </div>
          <div class="Materialflow">查看物流</div>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <div class="operate" @click="goDetail">订单详情</div>
            <div class="operate">去发货</div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center" class="pt-2">
        <el-pagination v-if="total > 0" v-model:current-page="queryParams.page" v-model:page-size="queryParams.limit"
          :total="total" @change="handleQuery" layout="total,  prev, pager, next,sizes, jumper" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Logistics",
  inheritAttrs: false,
});

import OrderAPI, { OrderPageQuery } from "@/api/order";
import { useRouter } from "vue-router";
const router = useRouter();
const queryFormRef = ref(ElForm);
const loading = ref(false);
const total = ref(0);
const ids = ref([]);
const goDetail = () => {
  router.push(`/order/detail/${12345}`);
};
const queryParams = reactive<OrderPageQuery>({
  orderId: "",
  goodsName: '',
  logisticsNo: "",
  orderStatus: '',
  payWay: '',
  createDate: '',
  deliveryType: "",
  page: '',
  limit: "",
  isAsc: false,
});

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}
// 日志表格数据
const pageData = ref([]);

/** 查询 */
function handleQuery() {
  loading.value = true;
  OrderAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = +data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.page = 1;
  queryParams.createDate = undefined;
  handleQuery();
}

onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped>
.toolsBox {
  display: flex;
  align-items: center;
  padding: 18px 0;

  .total {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
  }

  .tLine {
    width: 1px;
    height: 36px;
    background-color: #D3D9DD;
    margin: 0 20px;
  }

  .toolBtn {
    cursor: pointer;
    width: 80px;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #D3D9DD;
    margin-right: 20px;
  }
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;

  .userInfo {
    width: 191px;
    display: flex;
    justify-content: space-between;

    .lt {
      display: flex;

      .avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      .count {
        height: 35px;
        line-height: 1;
        text-align-last: left;

        .tpp {
          font-size: 12px;
          font-weight: 500;
          color: #333333;
          margin-top: 4px;
          margin-bottom: 7px;
        }

        .btt {
          font-size: 12px;
          font-weight: 500;
          color: #6c6c6c;
        }
      }
    }

    .rt {}
  }

  .userAddress {
    line-height: 1.2;
    text-align: left;
    width: 124px;
    font-size: 11px;
    font-weight: 500;
    color: #6c6c6c;
    margin-top: 7px;
  }
}

.state {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #333333;

  .cir {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1f75ec;
  }
}

.Materialflow {
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: #1f75ec;
}

.operate {
  font-size: 14px;
  color: #1f75ec;
  cursor: pointer;

  &:hover {
    color: #666;
  }
}

.payment {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: right;
  line-height: 1;

  .awy {
    width: 100%;
  }

  .price {
    margin-top: 5px;
    width: 100%;
  }
}

::v-deep .el-card__body {
  padding-top: 0;
}

.orderData ::v-deep .ivu-table-cell {
  padding-left: 0 !important;
}

::v-deep .el-upload-list {
  display: none;
}

::v-deep .el-tabs__item {
  height: 54px;
  line-height: 54px;
}

.tab {
  display: flex;
  align-items: center;
  margin-top: 10px;

  .img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
}

.goodBox .tab:first-child {
  margin-top: 0;
}

.w-250 {
  max-width: 250px;
}

.w-120 {
  width: 120px;
}

.tips {
  color: #c0c4cc;
  font-size: 12px;
}
</style>
